<template>
  <div class="searchRecommendView" ref="searchRecommendView">
    <header>
      <div class="back">
        <van-icon name="arrow-left" size="22" color="black" @click="back" />
      </div>
      <div class="title">
        {{ $route.query.role_type == "person" ? "创作人" : "机构" }}
      </div>
      <div></div>
    </header>
    <div class="top">
      <div class="left">
        <van-dropdown-menu>
          <van-dropdown-item
            v-model="value1"
            :options="option1"
            get-container="body"
            @open="closeAllCategories"
          />
        </van-dropdown-menu>
        <div class="categorieBox" v-if="options">
          <div
            class="title"
            @click="showAllCategories"
            :class="{ showAll: isShowAllCategories }"
          >
            {{ options[optionI].title }}
          </div>
          <div
            class="categoriesLid"
            v-show="isShowAllCategories"
            @click="closeAllCategories"
          >
            <div class="categories">
              <div
                class="categorie"
                v-for="(option, index) in options"
                :key="index"
                @click.stop="selectOptions(index)"
                :class="{ currentOption: optionI == index }"
              >
                {{ option.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="index" v-if="searchRecommends">
      <SearchRecommendItem
        v-for="searchRecommend in searchRecommends"
        :key="searchRecommend.id"
        :videoinfo="searchRecommend"
      />
    </div>
  </div>
</template>

<script>
import SearchRecommendItem from "@/components/SearchRecommendItem.vue";

export default {
  name: "SearchRecommendView",
  components: {
    SearchRecommendItem,
  },
  data() {
    return {
      order: "hot",
      value1: 1,
      option1: [
        { text: "推荐", value: 0 },
        { text: "最热", value: 1 },
        { text: "最新", value: 2 },
      ],
      options: null,
      optionI: 0,
      occupation_id: 0,
      isShowAllCategories: false,
      searchRecommends: null,
      page: 1,
      isAxios: false,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.$axios
        .get(
          `https://apis.netstart.cn/xpc/creators?role_type=${this.$route.query.role_type}&order=${this.order}&occupation_id=${this.occupation_id}&page=${this.page}`
        )
        .then((res) => {
          // console.log(res);
          if (this.page == 1) {
            // console.log(this.options);
            this.options = [
              { title: res.data.data.filter.categories.title, value: 0 },
              ...res.data.data.filter.categories.options,
            ];

            this.searchRecommends = res.data.data.list;
            this.page++;
          } else {
            if (res.data.data.next_page_url) {
              // console.log(res.data.data);
              this.searchRecommends = [
                ...(this.searchRecommends || ""),
                ...res.data.data.list,
              ];
              this.page++;
            } else {
              this.$toast.fail("已没有更多");
            }
          }
          this.isAxios = false;
          this.$toast.clear();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    back() {
      window.history.go(-1);
    },
    showAllCategories() {
      this.isShowAllCategories = !this.isShowAllCategories;
    },
    closeAllCategories() {
      this.isShowAllCategories = false;
    },
    selectOptions(i) {
      this.closeAllCategories();
      // console.log(i);
      if (this.optionI != i) {
        this.page = 1;
        this.optionI = i;
        this.occupation_id = this.options[i].value;
        this.getData();
      }
    },
    handleScroll() {
      // console.log(Math.ceil(window.scrollY), window.screen.height);
      //   console.log(this.$refs.searchRecommendView.clientHeight);
      if (
        Math.ceil(window.scrollY) + window.screen.height - 100 >=
        this.$refs.searchRecommendView.clientHeight
      ) {
        if (!this.isAxios) {
          this.getData();
          this.isAxios = true;
          this.$toast.loading({
            message: "加载中...",
            forbidClick: true,
          });
        }
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener("scroll", this.handleScroll);
    });
  },
  beforeDestroy() {
    // console.log("beforeDestroy");
    window.removeEventListener("scroll", this.handleScroll);
  },
  watch: {
    value1(newVal) {
      this.page = 1;

      if (newVal == 0) {
        this.order = "recommend";
      } else if (newVal == 1) {
        this.order = "hot";
      } else if (newVal == 2) {
        this.order = "new";
      }

      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
.searchRecommendView {
  header {
    background-color: white;
    box-sizing: border-box;
    border-bottom: 1px solid #f2f2f2;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    > div {
      width: 33%;
    }

    .back {
      i {
        margin-left: 15px;
      }
    }

    .title {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }
  }

  .top {
    position: fixed;
    top: 50px;
    left: 0;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;
    background-color: white;

    .left {
      margin-left: 7px;
      display: flex;
      align-items: center;

      :deep(.van-dropdown-menu__bar) {
        box-shadow: none;
        background-color: transparent;
      }

      :deep(.van-dropdown-menu__title) {
        font-weight: bold;
      }

      .categorieBox {
        position: relative;
        margin-left: 30px;

        .title {
          font-weight: bold;
          font-size: 15px;
        }

        .showAll {
          color: red;
        }

        .categoriesLid {
          position: fixed;
          top: 98px;
          left: 0;
          // z-index: 10;
          width: 100vw;
          height: 566px;
          background-color: rgba(0, 0, 0, 0.5);

          .categories {
            padding: 15px;
            padding-bottom: 0;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            background-color: white;

            .categorie {
              margin-bottom: 15px;
              width: 74px;
              text-align: center;
              height: 30px;
              line-height: 30px;
              border-radius: 5px;
              font-size: 13px;
              border: 1px solid #999;
            }

            .currentOption {
              background-color: #fdefe9;
              border-color: #fdefe9;
              color: red;
            }
          }
        }
      }
    }
  }

  .index {
    margin-top: 100px;
    padding: 0 15px;
  }
}
</style>
